<template>
  <div class="version-manage-detail w-full h-full display-flex-column" style="overflow: hidden;align-items: flex-start">
    <div class="list-item display-flex">
      <div class="item-title m-r-sm">版本号:</div>
      <div class="item-content">
        <a-input v-model="versionInfo.versionNum" style="width: 200px"/>
      </div>
    </div>
    <div class="list-item display-flex m-t-sm">
      <div class="item-title m-r-sm">发布时间:</div>
      <div class="item-content">
        <a-date-picker
          v-model="versionInfo.publishDate"
          show-time
          placeholder="请选择时间"
          @change="handlerPublishDatePick"
          @ok="handlerPublishDatePick"
          style="width: 200px"/>
      </div>
    </div>
    <div class="list-item display-flex-column m-t-sm flex-1 w-full" style="overflow: hidden">
      <div class="item-title m-r-sm">版本更新内容:</div>
      <div class="item-content flex-1 display-flex-column m-t-sm" style="overflow: hidden">
        <Toolbar
          key="data1_tool"
          style="border: 1px solid #dcdcdc;"
          :editor="editorManage.editor"
          :defaultConfig="editorManage.toolbarConfig"
          :mode="editorManage.mode"
        />
        <Editor
          key="data1_editor"
          style="border: 1px solid #ccc;overflow-y: hidden;border-top: none;"
          v-model="editorManage.html"
          :defaultConfig="editorManage.editorConfig"
          :mode="editorManage.mode"
          class="h-full"
          @onCreated="(editor)=>onCreated(editor)"
        />
      </div>
    </div>

  </div>
</template>
<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import moment from 'moment'
import '@wangeditor/editor/dist/css/style.css'
import versionService from '@/api/system/versionService'

export default {
  name: 'VersionManageDetail',
  props: {
    sourceId: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  components: { Editor, Toolbar },
  data () {
    return {
      versionInfo: {},
      editorManage: {
        editor: null,
        html: '',
        toolbarConfig: {},
        editorConfig: { placeholder: '请输入内容...' },
        mode: 'simple'
      }
    }
  },
  mounted () {
    console.log('sourceId', this.sourceId)
    if (this.sourceId) {
      this.getVersionLogById()
    }
  },
  methods: {
    async getVersionLogById () {
      const data = await versionService.getVersionLogById(this.sourceId)
      console.log('data', data)
      Object.assign(this.versionInfo, data)
      this.editorManage.html = this.versionInfo.content
    },
    onCreated (editor) {
      console.log('editor', editor)
      this.editorManage.editor = editor
    },
    handlerPublishDatePick (e) {
      this.versionInfo.publishDate = moment(e).format('YYYY-MM-DD HH:mm:ss')
      console.log('this.versionInfo.publishDate', this.versionInfo.publishDate)
      this.$forceUpdate()
    },
    getVersionLogInfo () {
      const preData = {
        versionNum: this.versionInfo.versionNum,
        publishDate: this.versionInfo.publishDate,
        content: this.editorManage.html
      }
      const data = this._.cloneDeep(this.versionInfo)
      Object.assign(data, preData)
      return data
    }
  }
}
</script>

<style scoped lang="less">
.version-manage-detail {
  padding: 10px;

  .list-item {
    .item-title {
      width: 120px;
    }
  }

}

</style>
